<!--
 * @Date: 2022-03-29 11:05:54
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-29 18:46:33
 * @FilePath: \vue3Components\src\views\tabletest.vue
 * @Description: something
-->
<template>
  <my-table
    :isLoading="isLoading"
    pagination
    :editRowIndex="editRowIndex"
    :Options="options"
    isEditRow
    border
    :TabelData="tableData"
    @on-confirm="Check"
    @on-cancel="close"
    :total="total"
    :currentPage="currentPage"
    :pageSize="pageSize"
    @currentChange="currentChange"
    @sizeChange="sizeChange"
    paginationAlign="center"
  >
    <template #name="{ scope }">
      <el-popover effect="light" trigger="hover" placement="top">
        <template #default>
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
        </template>
        <template #reference>
          <div class="name-wrapper">
            <el-tag size="small">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-popover>
    </template>
    <template #date="{ scope }">
      <el-icon-timer></el-icon-timer>
      <span style="margin-left: 10px">{{ scope.row.date }}</span>
    </template>
    <template #operation="{ scope }">
      <el-button size="small" type="primary" @click="handleEdit(scope)">编辑</el-button>
      <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
    </template>
    <template #editRow="{ scope }">
      <el-button size="small" type="primary" @click="confirmha(scope)">确认</el-button>
      <el-button size="small" type="danger" @click="cancel(scope)">取消</el-button>
    </template>
  </my-table>
</template>

 <script lang='ts' setup>
import { ref, onMounted } from 'vue';
import MyTable from '../components/Table/Table.vue';
import { TableOptions } from '../components/Table/type/type';
import axios from 'axios'
interface TableData {
  date: string
  name: string
  address: string
}
let editRowIndex = ref<string>('edit')
let tableData = ref<TableData[]>([])
let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let isLoading = ref<boolean>(true)
let options: TableOptions[] = [
  //按列配置
  {
    prop: 'date',
    label: '日期',
    // width: '180',
    align: 'center',
    editable: true,
    slot: 'date'
  },
  {
    prop: 'name',
    label: '姓名',
    // width: '180',
    align: 'center',
    slot: 'name'
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center',
    editable: true
  },
  {
    label: '操作',
    prop: 'actions',
    action: true,
    align: 'center'
  }
]
onMounted(() => {
  axios.post('/api/list', {
    current: currentPage.value,
    pageSize: pageSize.value
  }).then((res) => {
    isLoading.value = false
    tableData.value = res.data.data.rows
    total.value = res.data.data.total
  })
})
const handleEdit = (scope: any) => {
  console.log(scope);
}
const handleDelete = (scope: any) => {
  console.log(scope);
}
const Check = (val) => {
  console.log(val);

}
const close = (scope) => {
  console.log(scope);
}
const cancel = (scope) => {
  console.log(scope);
}
const confirmha = (scope) => {
  console.log(scope);
}
const currentChange = (val) => {
  console.log(val);
  currentPage.value = val
  axios.post('/api/list', {
    current: currentPage.value,
    pageSize: pageSize.value
  }).then((res) => {
    tableData.value = res.data.data.rows
    total.value = res.data.data.total
  })
}
const sizeChange = (val) => {
  console.log(val);
  pageSize.value = val
  axios.post('/api/list', {
    current: currentPage.value,
    pageSize: pageSize.value
  }).then((res) => {
    isLoading.value = false
    tableData.value = res.data.data.rows
    total.value = res.data.data.total
  })
}
</script>
<style lang='less' scoped>
svg {
  width: 1em;
  height: 1em;
}
</style>